<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :safeAreaInsetTop="true"
	  height="0"
	  bgColor="transparent"
	  leftIcon=""
	/>
	<!-- #endif -->
	<view>
		<view class="p-5">
			<view class="text-center">
				<image :src="shopInfo.image" style="width: 150rpx;height: 150rpx;" class="rounded-circle"></image>
			</view>
			<view class="text-center mt-2 h4">{{ shopInfo.name }}</view>
			<view class="text-center text-warning font-md mt-2">{{ deskNumber }}桌</view>
			<view class="text-center mt-2 text-color-assist font-size-sm" v-if="isEmpty">请选择就餐人数</view>
			<view class="text-center font mt-3 flex flex-wrap justify-center" v-if="isEmpty">
				<span v-for="(item,index) in 12" :key="index" class="penple" :class="{'checked':(index + 1) == peoples}"  @click="selectPeople(index + 1)">
					<span class="penple-num">{{ index + 1}}</span>
				</span>
			</view>
			<view class="mt-5" v-if="isEmpty"><uv-button color="#09b4f1" :disabled="disabled" text="确定" @click="submit"></uv-button></view>
			<view class="mt-5" v-else><uv-button color="#09b4f1"  text="已经开台,请直接点餐" @click="submit"></uv-button></view>
			<uv-toast ref="toast"></uv-toast>
		</view>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  shopGet,
  openDesk
} from '@/api/market'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { urlDecode,parseQuery,isWeixin} from '@/utils/util'
import { useMainStore } from '@/store/store'
import cookie from '@/utils/cookie'


const main = useMainStore()

const peoples = ref(0)
//const isChecked = ref(0)
const deskNumber = ref('')
const shopInfo = ref({})
const desk = ref({})
const toast = ref()
const disabled = ref(false)
const shopId = ref(0)
const deskId = ref(0)
const isEmpty = ref(true)

onLoad((option) => {
	//为了方便演示，这里用本地缓存
	// #ifdef H5
	if(isWeixin()){
		if(parseQuery().scene){
			let params = urlDecode(decodeURIComponent(option.scene))
			cookie.set('params', params)
		}else if(option.scene){
			let params = urlDecode(decodeURIComponent(option.scene))
			cookie.set('params', params)
		}
		
		let newParams = cookie.get('params')
		if(newParams){
			deskNumber.value = newParams.number
			desk.value = newParams
			main.SET_DESK(newParams)
			main.SET_ORDER_TYPE('desk')
			shopId.value = newParams.shopId
			deskId.value = newParams.id
			getShop(newParams.shopId,newParams.id)
		}
	 }
	// #endif
	
	// #ifdef MP-WEIXIN
	
	// #endif
})

onShow((option) => {
	
	// #ifdef MP-WEIXIN
	const mypage = getCurrentPages()
	console.log('mypage:',mypage[mypage.length - 1].options.scene)
	let params = urlDecode(decodeURIComponent(mypage[mypage.length - 1].options.scene))
	console.log('params:',params)
	if(params){
		deskNumber.value = params.number
		desk.value = params
		main.SET_DESK(params)
		main.SET_ORDER_TYPE('desk')
		shopId.value = main.desk.shopId
		deskId.value = main.desk.id
		getShop(main.desk.shopId,main.desk.id)
		return
	}
	
	if(main.isScan){
		deskNumber.value = main.desk.number
		desk.value = main.desk
		shopId.value = main.desk.shopId
		deskId.value = main.desk.id
		getShop(main.desk.shopId,main.desk.id)
		return
	}
	
	// #endif
	
})

const selectPeople = (num) => {
	peoples.value = num
	desk.value.people = num
}

const getShop = async(shopId,deskId) => {
	uni.removeStorageSync('cart');
	if(!main.isLogin) {
		uni.navigateTo({url: '/pages/components/pages/login/login'})
		return
	}
	//获取门店
	let shop = await shopGet({
		shopId: shopId,
		deskId: deskId
	})
	
	shopInfo.value = shop
	console.log("店铺4",main.store)
	main.SET_STORE(shop)
	
	if(!shop.isEmpty){
		let myDesk = main.desk
		myDesk.people = shop.deskPeople
		myDesk.orderId = shop.deskOrderId
		main.SET_DESK(myDesk)
		isEmpty.value = false
	}
	
}

//开台
const submit = async() => {
	if(isEmpty.value){
		if(peoples.value == 0) {
			uni.showToast({
			  title: '请选择就餐人数',
			  duration: 2000,
			  icon: 'error'
			});
			
			return
		}
		await openDesk({shopId: shopId.value,deskId: deskId.value,people: peoples.value})
	}
	cookie.remove('params')
	
	uni.switchTab({
		url: '/pages/menu/menu'
	}) 
}
	
</script>

<style lang="scss" scoped>
	.checked {
		background-color: #DA5650 !important;color: #ffffff;
	}
	.penple {
		padding: 40rpx;background-color: #ffffff;margin: 10rpx 10rpx;
	}
	.penple-num {
		padding: 10rpx;display: block; width:30rpx
	}

</style>
